import {
  RectangleGroupIcon,
  SparklesIcon,
  DocumentDuplicateIcon
} from '@heroicons/react/24/outline';
import Callout from 'components/Callout';
import Chip from 'components/Chip';
import {Card} from 'nextra-theme-docs';

# Next.js internationalization (i18n)

Welcome to the `next-intl` docs!

In this guide you will learn how to set up internationalization (i18n) in your Next.js app.

With **Next.js 13**, the [App Router](https://nextjs.org/docs/app) along with support for React Server Components was introduced and announced as stable with version 13.4. Following the lead of Next.js, `next-intl` also recommends this paradigm since it increases both simplicity as well as flexibility when it comes to i18n.

<div className="mt-8 flex flex-col gap-4 md:w-2/3">
  <Card
    icon={<RectangleGroupIcon />}
    title="Usage with the App Router"
    href="/docs/getting-started/app-router"
  />
  <Card
    icon={<DocumentDuplicateIcon />}
    title="Usage with the Pages Router"
    href="/docs/getting-started/pages-router"
  />
</div>
